<template>
    <div>首页</div>
    <div class="pie-container">
        <div class="flex">
            <el-radio-group v-model="pieType" size="large">
                <el-radio-button label="sale_">销量</el-radio-button>>
                <el-radio-button label="_money">销售额</el-radio-button>>
            </el-radio-group>
            <el-select v-model="pieDay" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in pieDays" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div id="pie" style="width: 100%;height: 350px;"></div>
    </div>
    <div class="map-container">
        <div id="map" style="width: 100%;height: 600px;"></div>
    </div>
</template>

<script setup lang="ts">
// 1. 导入echarts 模块
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'
import * as api from '../request/api'
// 直接把地址的json数据导入
import china from '../json/china.json'
type EChartsOption = echarts.EChartsOption

// echarts 需要一个容器（DOM）,但是vue创建的时候,一定注意 哪个生命周期是有（onMounted） 真实DOM 可以初始化的

// pieType  要得到就是  sale_ 或着 money_
const pieType = ref<"sale_" | "_money">("sale_")
// 默认的选项
const pieDay = ref("yesterday")
const pieDays = [
    {
        label: "昨天",
        value: "yesterday"
    },
    {
        label: "今天",
        value: "today"
    },
    {
        label: "前三天",
        value: "three_days"
    },
    {
        label: "前7天",
        value: "seven_days"
    },
    {
        label: "前14天",
        value: "fourteen_days"
    }
]

let pieData: IPieItem[] = []
var pieChart: echarts.ECharts;
var pieOption: EChartsOption;

// 当我们的 pieType 发生变化的时候，修改 饼图数据,
// 可以使用的方法 有很多 ， radio ， select 都有 change 事件，可以用来 做 pieType 的变化的处理
// 我们这里 直接使用 watch
watch([pieType, pieDay], () => {
    let key = ""
    if (pieType.value === "sale_") {
        // 意味着 我们点击了 销量这个按钮
        key = pieType.value + pieDay.value
    } else {
        key = pieDay.value + pieType.value
    }
    // console.log(key);
    // 根据key 来去除数据 ，重新渲染
    const data = pieData.map((item) => ({
        name: item.name,
        value: item[key]
    }));
    (pieOption.series as echarts.SeriesOption[])[0].data = data;
    pieOption && pieChart.setOption(pieOption);
})

onMounted(() => {
    api.admin.GetIndexDataApi().then(res => {
        console.log(res);
        pieData = res.salePie
        // 2. 初始化echarts 实例
        var chartDom = document.getElementById('pie') as HTMLElement
        // console.log(chartDom);
        pieChart = echarts.init(chartDom)
        // 可能需要对数据进行转换
        const data = res.salePie.map((item) => ({
            name: item.name,
            value: item.sale_yesterday
        }));
        // console.log(data);

        // 3. 传入数据，绘制图表
        // 数据从series 的第一个数组项的data传入
        // series 是 echarts.SeriesOption | echarts.SeriesOption[] | undefined 类型
        (pieOption.series as echarts.SeriesOption[])[0].data = data
        console.log(pieOption);
        pieOption && pieChart.setOption(pieOption)

        initMap(res.saleMap)
    })
    pieOption = {
        // 鼠标移动上去的提示
        tooltip: {
            trigger: 'item',
            // {a}  {b}  {c}  {d} 是一种格式
            formatter: '{b} : {c},({d}%)'
        },
        // 图例
        legend: {
            left: 'right',
            top: '5%',
            right: 20,
            height: 100,
            orient: "vertical"
        },
        series: [
            {
                // name: 'Radius Mode',
                type: 'pie',
                radius: ["40%", "70%"],
                center: ['20%', "50%"],
                label: {
                    show: true,
                    position: "outside"
                },
                // 高亮
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data: [
                    { value: 40, name: 'rose 1' },
                    { value: 33, name: 'rose 2' },
                    { value: 28, name: 'rose 3' },
                    { value: 22, name: 'rose 4' },
                    { value: 20, name: 'rose 5' },
                    { value: 15, name: 'rose 6' },
                    { value: 12, name: 'rose 7' },
                    { value: 10, name: 'rose 8' }
                ]
            },
        ]
    }

})

// 地图的使用
// 1. 需要一个json数据，让这些数据告诉我们需要展示哪些地区
function initMap(mapData: IMapItem[]) {
    type EChartsOption = echarts.EChartsCoreOption;
    var chartDom = document.getElementById('map')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    // console.log(mapData);

    echarts.registerMap('HK', china as any);

    // 转换一下格式 {name,value}的格式
    const data = mapData.map((item) => ({
        name: item.areaName,
        value: item.saleNum
    }))

    // 
    myChart.setOption(
        (option = {
            title: {
                text: '全国销量分布图',

                left: "center"
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/> 销量 {c} '
            },
            visualMap: {
                min: 0,
                max: 1200000,
                realtime: true,
                calculable: true,
                inRange: {
                    color: ['skyblue', 'pink', 'yellow']
                }
            },
            series: [
                {
                    // name: '香港18区人口密度',
                    type: 'map',
                    map: 'HK',
                    label: {
                        show: false
                    },
                    data,
                    // 自定义名称映射
                    // json数据 和 name 
                }
            ]
        })
    );
    option && myChart.setOption(option);

}


</script>

<style scoped>
.flex {
    display: flex;
    justify-content: space-between;
}
</style>